<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      #canvas {
          background: #f1f1f1;
      }
      @font-face {
          font-family: "YouSheBiaoTiHei";
          src: url("./YouSheBiaoTiHei.ttf")
      }
      body {
          background: gray;
      }
      div {
          position: relative;
      }

      p {
          font-family: "YouSheBiaoTiHei";
          font-size: 26px;
          font-weight: 400;
          line-height: 34px;
          letter-spacing: 6px;
          color: #D0021B;

      }

      .text1 {
          /*display: none;*/
          font-size: 26px;
          position: absolute;
          z-index: 3;
          font-weight: bold;
          /*top: 0px;*/
          /*left: -1px;*/
      }
      .text2 {
          font-size: 26px;
          font-weight: bold;
          -webkit-text-stroke: 2px  #fff;
          position: absolute;
          z-index: 2;
          color: #fff;
          /*text-shadow: 2px 2px 0px #000000;*/
      }
      .text3 {
          font-size: 26px;
          font-weight: bold;
          /*-webkit-text-stroke: 2px  #000;*/
          position: absolute;
          color: #000;
          z-index: 1;
          text-shadow: 3px 3px 2px #000000
      }
  </style>
</head>
<body>
<div>
  <!--<p  class="text1">工作汇报</p>
  <p  class="text2">工作汇报</p>
  <p  class="text3">工作汇报</p>-->
  <canvas id="canvas" width="1000" height="600"></canvas>
</div>
</body>
<script>
  window.onload = ()=>{
      const canvas = document.getElementById('canvas')
      const ctx = canvas.getContext('2d')
      //  文字阴影

      async function drawTextShadow() {
          var ctx = document.getElementById('canvas').getContext('2d');
          ctx.scale(5,5)

          const loadFonts = async () => {
              let loaders = []
              const font65 = new FontFace('HYQiHeiX2-65W', `url(./YouSheBiaoTiHei.ttf)`)
              document.fonts.add(font65)
              loaders.push(font65.load())
              return await Promise.all(loaders)
          }

          await loadFonts()


          ctx.shadowOffsetX = 12;
          ctx.shadowOffsetY = 12;
          ctx.shadowBlur = 0;
          ctx.shadowColor = "rgba(0, 0, 0, 1)"
          canvas.style.letterSpacing = '6px';

          ctx.lineWidth = 6;
          ctx.lineJoin = 'round'
          ctx.font = 'bold 40px YouSheBiaoTiHei';
          ctx.strokeStyle = '#fff'
          ctx.strokeText('工作汇报', 5, 50)


          ctx.shadowOffsetX = 0;
          ctx.shadowOffsetY = 0;
          ctx.shadowBlur = 0;
          ctx.shadowColor = "rgba(0, 0, 0, 0)"

          ctx.fillStyle = "#D0021B";
          ctx.fillText("工作汇报", 5, 50);


      }

      drawTextShadow()
  }
</script>
</html>
